<template>
  <div id="app">
    <!-- <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-icon name="chat-o" />
    <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
    <van-switch v-model="checked" /> -->
    <!-- 路由出口 -->
    <router-view />
    <!-- <div class="box"></div> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      // checked: true
    }
  }
  // async created () {
  //   const data = await this.$http.get('/') // 测试axios配置成功
  //   console.log(data)
  // }
}
</script>
<style lang="scss">
// less scss sass stylus 这些都是做css的预处理的
// scss基本语法和less无差别. 变量的定义 函数的定义有差别 ...
// @变量名: 变量值; // less定义变量
// $变量名: 变量值; // scss定义变量
// scss的语法
$baseColor: green;
#app {
  // .box {
  //   // 安装一个插件,书写的是px单位, 插件帮我们转换成rem单位
  //   width: 375px;
  //   height: 300px;
  //   background-color: $baseColor;
  // }
}
// sass语法 不加分号 不加 {}   stylus语法和sass语法类似
// #app
//   .btn
//     background-color: pink
</style>
